<template>
  <dv-scroll-ranking-board :config="config" style="width:400px;height:300px; color: black;" />
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [
          { name: '正常运行', value: 0 },
          { name: '正常停机', value: 0 },
          { name: '告警运行', value: 0},
          { name: '故障停机', value: 0 },
          { name: '通讯中断', value: 10 }
        ],
        unit: '单位',
        valueFormatter: this.valueFormatter // 将valueFormatter方法传递给config
      }
    };
  },
  methods: {
    valueFormatter({ value }) {
      const reverseNumber = (value + '').split('').reverse();
      let valueStr = '';

      while (reverseNumber.length) {
        const seg = reverseNumber.splice(0, 3).join('');
        valueStr += seg;
        if (seg.length === 3) valueStr += ',';
      }

      return valueStr.split('').reverse().join('');
    }
  }
};
</script>

<style>
.dv-scroll-ranking-board .progress-bar {
  background-color: red !important;
}
</style>
